<template>
  <!-- 催收执行页-还款信息模块-还款计划 -->
  <section class="component pay-info">
    <!-- 信息 -->
      <data-box :height="390" :data="caseInfo" ref="data-box">
      <template slot="columns">
       <el-table-column prop="payPeriod" label="还款期数" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="shouldRepayDate" label="应还日期" :min-width="$helper.getColumnWidth(3)" :formatter="row  => $filter.dateFormat(row.shouldRepayDate)"></el-table-column>
       <el-table-column prop="payPrincipal" label="计划应还本金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="payInterest" label="计划应还利息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="payAmount" label="剩余应还金额" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="surplusPrincipal" label="剩余应还本金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="surplusInterest" label="剩余应还利息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="payNoun" label="剩余应还复利" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <!-- <el-table-column prop="payPlatformFee" label="应还平台管理费" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
       <el-table-column prop="payFine" label="剩余应还罚息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="payLiquidated" label="剩余应还违约金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="overduePenalty" label="剩余应还滞纳金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="payDate" label="已还款日期" :min-width="$helper.getColumnWidth(3)" :formatter="row  => $filter.dateFormat(row.payDate)"></el-table-column>
       <el-table-column prop="hasPayPrincipal" label="已偿还本金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="hasPayInterest" label="已偿还利息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="hasPayFine" label="已偿还罚息" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="hasPayNoun" label="已偿还复利" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="paidOverduePenalty" label="已偿滞纳金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="hasPayLiquidated" label="已偿违约金" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <el-table-column prop="hasPayAmount" label="已偿金额" :min-width="$helper.getColumnWidth(3)"></el-table-column>
       <!-- <el-table-column prop="hasPayManagement" label="已偿还账号管理费" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
       <!-- <el-table-column prop="manageFee" label="管理费" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
       <!-- <el-table-column prop="surplusPlatformFee" label="剩余管理费" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
       <!-- <el-table-column prop="sumPayment" label="还款总额" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
        <!-- <el-table-column prop="payType" label="还款类型" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
        <!-- <el-table-column prop="derateOverduePenalty" label="已减免滞纳金" :min-width="$helper.getColumnWidth(3)"></el-table-column> -->
      </template>
      </data-box>
  </section>
</template>


<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { DataGrid, DataGridItem } from '@zct1989/vue-component';
import DataBox from '~/components/common/data-box.vue';
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL } from "~/config/enum.config"
import { PageService } from "~/utils/page.service";

@Component({
  components: {
    DataBox,
    DataGrid,
    DataGridItem,
  },
})
export default class CaseInfo extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(PageService) private pageService: PageService;
  private caseInfo: any = {};


  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  private activated(){
    this.refreshData()
  }

  private refreshData() {
      this.caseOperatorPageService.getPersonalRepaymentPlan(this.caseId).subscribe(
        (data) => this.caseInfo = data
        // (data) => {
        //   this.caseInfo = data
        //   console.log(this.caseInfo,"this.caseInfo")
        //   }
      );
    }
}
</script>

<style lang="less" scoped>
.component.case-info {
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 15px;
    margin-right: 5px;
    background-color: #28313e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
  }

  .circle-title {
    font-size: 14px;
    line-height: 13px;
    color: #28313e;
  }
}
</style>
